<template>
	<view>
		<u-navbar :is-back="false"  title="聊天室" :background="background"></u-navbar>
		<view class="content">
			<scroll-view scroll-y="true" class="msgs"  ref="msgBox" :scroll-into-view="block">
				<view v-for="(item,index) in messages" :key="index" class="oneMsg" :id="'kkk'+index">
					<view v-if="item.user!=name&&item.user!='sysout'" class="textLine">
						<text class="other_user" @click="clickName(item.user)">{{item.user}}</text>
						<text style="margin: 0 10upx;">:</text>
						<view class="textType">
							<view class="other_user">{{item.msg}}</view>
						</view>
					</view>
					<view v-if="item.user=='sysout'" style="text-align: center;">
						<text>{{item.msg}}</text>
					</view>
					<view v-if="item.user==name" class="textLine" style="flex-direction:row-reverse;">
						<text class="self-user">{{item.user}}</text>
						<text style="margin: 0 .5em;">:</text>
						<view class="textType">
							<view class="self-user">{{item.msg}}</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="toLine" v-if="toUsers.length>0" style="margin: 5upx 0;">
				<text v-for="(item,idx1) in toUsers" :key="idx1" @click="remove(idx1)">@{{item}}</text>
			</view>
			<view class="field">
				<u-input v-model="msg" placeholder="请输入聊天信息" border clearable :focus="inpFocus" @confirm="send"></u-input>
				<u-button size="medium" type="primary" @click="send" style="width: 20%;">发送</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background:{
					'background-image': 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				},
				name:'',
				user:'',
				msg:'',
				users:[],
				socketTask:'',
				messages:[],
				toUsers:[],
				scrollTop:0,
				block:'',
				inpFocus:false
			}
		},
		methods: {
			add_to(uname){
				this.toUsers.push(uname);
			},
			clear_to(){
				this.toUsers=[];
			},
			clickName(uname){
				this.toUsers.push(uname);
				//this.msg+='@'+uname+' ';
				this.$nextTick(()=>{
					this.inpFocus=true;
				})
				
			},
			remove(idx){
				this.toUsers.splice(idx,1);
			},
			send(){
				var dataObj={
					user:this.toUsers.length==0?'all':this.toUsers.join(),
					msg:this.msg
				};
				var message=JSON.stringify(dataObj);
				uni.sendSocketMessage({
					data:message
				});
				this.toUsers=[];
				this.msg='';
				
			}
		},
		computed:{
			to_users(){
				var str='';
				for(var i=0;i<this.toUsers.length;i++){
					var u_name=this.toUsers[i];
					str+='@'+u_name+',';
				}
				if(str.length>0){
					str=str.substring(0,str.length-1);
				}
				return str;
			}
		},
		watch: {
			messages(newValue, oldValue) {
				this.$nextTick(()=>{
					this.block='kkk'+(newValue.length-1);
				})
			}
		},
		onLoad() {
			var name=uni.getStorageSync('name');
			if(!name){
				uni.redirectTo({
					url:'../login',
				})
				return;
			}
			this.name=name;
			// console.log(this.wsUrl);
			this.socketTask= uni.connectSocket({
				url:'oneToMany/'+name,
			});
			uni.onSocketOpen(function (res) {
			  console.log('WebSocket连接已打开！');
			});
			uni.onSocketError(function (res) {
			  // console.log('WebSocket连接打开失败，请检查！');
			  console.log(res);
			  uni.redirectTo({
			  	url: '../login'
			  });
			});
			uni.onSocketClose(function(){
				console.log("与服务器的连接已经关闭，请重新登录");
				uni.redirectTo({
					url:'../login'
				})
			});
			uni.onSocketMessage(res=> {
			  console.log('收到服务器内容：' + res.data);
			  var msg=eval('('+res.data+')');
			  this.messages.push(msg);
			  if(msg.type=='sysout'){
				  this.users=this.$u.deepClone(msg.users);
			  }
			});
		},
		onUnload() {
			uni.closeSocket();
		}
	}
</script>

<style scoped>
.msgs {
	height: 80vh;
	padding: 10upx;
	/* border: 1px solid #18B566; */
	width: 97%;
}
.oneMsg {
	line-height: 2em;
}
.other_user {
	color: #2B85E4;
}
.self-user {
	color: #fa3534 ;
}
.field {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin: 10upx;
}
.field>.label {
	width: 4em;
	text-align: right;
}
.textLine {
	width: 100%;
	display: flex;
	align-items: baseline;
	margin-bottom: 10upx;
}
.textType {
	max-width: 400upx;
	background-color: #FFFFFF;
	border-radius: 10upx;
	box-shadow: 3upx 3upx 3upx #e3e3e3;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10upx;
	flex-wrap: wrap;
}
.textType>view {
	width: 100%;
	font-size: 28upx;
	color: #666;
	word-wrap: break-word;
	word-break: break-all;
	white-space: pre-line;

}
.toLine {
	color: #606266;
}
.toLine>text {
	background-color: #C0C4CC;
	margin: 10upx;
}
</style>
